<template>
  <div class="bigDiv">
    <div class="headerDiv">
      <h5>添加员工信息</h5>
    </div>
    <div class="content" style="margin-left: 20px">
      <el-form :rules="rules" :inline="true" ref="form" :model="form" label-width="120px">
        <el-form-item style="margin-bottom: 15px" prop="eId" label="员工编号">
          <el-input style="width: 280px" v-model="form.eId" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="员工姓名" prop="eName">
          <el-input style="width: 280px" v-model="form.eName" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="员工性别">
          <el-radio v-model="form.eSex" label="男">男</el-radio>
          <el-radio v-model="form.eSex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px;margin-left: 175px" label="员工出生日期" prop="eBirthday">
          <el-date-picker
              style="width: 280px"
              v-model="form.eBirthday"
              type="date"
              placeholder="年/月/日"
              value-format="yyyy-MM-dd"
              size="small">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="员工电话" prop="ePhone">
          <el-input style="width: 280px" v-model="form.ePhone" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="员工学历" prop="eEducation">
          <el-select style="width: 280px" v-model="form.eEducation" placeholder="请选择学历" size="small">
            <el-option
                v-for="item in education"
                :key="item.value"
                :label="item.label"
                :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="婚姻状况" prop="eMarriage">
          <el-select style="width: 280px" v-model="form.eMarriage" placeholder="请选择婚姻状况" size="small">
            <el-option
                v-for="item in Marital"
                :key="item.value"
                :label="item.label"
                :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="状态">
          <el-select style="width: 280px" @change="statusChange($event)" v-model="form.eStatus" placeholder="请选择职位状态"
                     size="small">
            <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="现住址">
          <el-input style="width: 280px" v-model="form.eLocation" size="small"></el-input>
        </el-form-item>
        <transition name="el-fade-in-linear">
          <el-form-item v-show="show" style="margin-bottom: 15px" label="离职日期">
            <el-date-picker
                style="width: 280px"
                v-model="form.eLeaveDate"
                type="date"
                placeholder="年/月/日"
                value-format="yyyy-MM-dd"
                size="small">
            </el-date-picker>
          </el-form-item>
        </transition>
        <el-form-item style="margin-bottom: 15px" label="血型">
          <el-input style="width: 280px" v-model="form.eBlood" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="健康状况">
          <el-input style="width: 280px" v-model="form.eHealth" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="民族">
          <el-input style="width: 280px" v-model="form.eNation" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="籍贯">
          <el-input style="width: 280px" v-model="form.eNP" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="年龄">
          <el-input style="width: 280px" v-model="form.eAge" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="工龄">
          <el-input style="width: 280px" v-model="form.eSeniority" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="入职日期">
          <el-date-picker
              style="width: 280px"
              v-model="form.eJoinDate"
              type="date"
              placeholder="年/月/日"
              value-format="yyyy-MM-dd"
              size="small">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="级别">
          <el-select style="width: 280px" v-model="form.eLevel" placeholder="请选择级别" size="small">
            <el-option
                v-for="item in level"
                :key="item.value"
                :label="item.label"
                :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="所在部门">
          <el-select style="width: 280px" v-model="form.eDep" placeholder="请选择部门" size="small">
            <el-option
                v-for="item in department"
                :key="item.did"
                :label="item.dname"
                :value="item.dname">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="职称">
          <el-select style="width: 280px" v-model="form.eJobTitle" placeholder="请选择职称" size="small">
            <el-option
                v-for="item in profession"
                :key="item.value"
                :label="item.label"
                :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="职务">
          <el-select style="width: 280px" v-model="form.ePosition" placeholder="请选择职务" size="small">
            <el-option
                v-for="item in position"
                :key="item.value"
                :label="item.label"
                :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="人员级别">
          <el-select style="width: 280px" v-model="form.ePersonType" placeholder="请选择人员级别" size="small">
            <el-option
                v-for="item in category"
                :key="item.value"
                :label="item.label"
                :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <br>
        <h5 style="text-align: center; color: #9d9d9d;font-weight: normal">
          温馨提示：以下信息为选填信息，照片、入职表以及身份证附件处，建议图片尺寸大小为800px*1000px</h5><br>
        <el-form-item style="margin-bottom: 15px" label="身份证号码">
          <el-input style="width: 280px" v-model="form.eIdCard" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="家庭住址">
          <el-input style="width: 280px" v-model="form.eHomeLocation" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="身高（cm）">
          <el-input style="width: 280px" v-model="form.eHeight" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="体重（kg）">
          <el-input style="width: 280px" v-model="form.eWeight" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="政治面貌">
          <el-input style="width: 280px" v-model="form.ePStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="员工qq">
          <el-input style="width: 280px" v-model="form.qq" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="员工手机">
          <el-input style="width: 280px" v-model="form.eStaffPhone" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="员工邮箱" prop="eEmail">
          <el-input style="width: 280px" v-model="form.eEmail" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="工作经验">
          <el-input type="textarea" :rows="3" style="width: 280px" v-model="form.eWorkExperience"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="掌握技能">
          <el-input type="textarea" :rows="3" style="width: 280px" v-model="form.eSkill" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="获奖经历">
          <el-input type="textarea" :rows="3" style="width: 280px" v-model="form.eAward" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="年度考核情况">
          <el-input type="textarea" :rows="3" style="width: 280px" v-model="form.eYearStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 15px" label="人员备注">
          <el-input style="width:690px" type="textarea" :rows="3" v-model="form.eRemark" size="small"></el-input>
        </el-form-item>
        <br>
        <el-form-item style="margin-bottom: 15px" label="照片">
          <el-upload
              class="avatar-uploader"
              action="http://132.232.110.185/personnelManagement/file/imgUploadFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload">
            <img v-if="form.eImg" :src="form.eImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <br>
        <el-form-item style="margin-bottom: 15px" label="入职表">
          <el-upload
              class="avatar-uploader"
              action="http://132.232.110.185/personnelManagement/file/imgUploadFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload">
            <img v-if="form.eDesImg" :src="form.eDesImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <br>
        <el-form-item style="margin-bottom: 15px" label="身份证附件">
          <el-upload
              class="avatar-uploader"
              action="http://132.232.110.185/personnelManagement/file/imgUploadFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess3"
              :before-upload="beforeAvatarUpload">
            <img v-if="form.eCardImg" :src="form.eCardImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <br>
        <el-form-item style="margin-left: 300px">
          <el-button type="primary" @click="onSubmit('form')">添加员工</el-button>
        </el-form-item>
      </el-form>
      <br>
      <br>
      <br>
      <br>
    </div>
  </div>
</template>

<script>
export default {
  name: "InputStuffInfo",
  data() {
    return {
      //表单绑定数据
      form: {
        //离职日期
        eLeaveDate: '',
        //性别
        eSex: '女',
        //出生日期
        eBirthday: '',
        //入职日期
        eJoinDate: '',
        //学历
        eEducation: '',
        //年龄
        eAge: '',
        //婚姻
        eMarriage: '',
        //入职状态
        eStatus: '',
        //级别
        eLevel: '',
        //部门
        eDep: '',
        //职称
        eJobTitle: '',
        //职务
        ePosition: '',
        //人员类别
        ePersonType: '',
        //照片
        eImg: '',
        //入职表
        eDesImg: '',
        //身份证附件
        eCardImg: '',
        //编号
        eId: '',
        //姓名
        eName: '',
        //电话
        ePhone: '',
        //现住址
        eLocation: '',
        //血型
        eBlood: '',
        //健康状况
        eHealth: '',
        //民族
        eNation: '',
        //籍贯
        eNP: '',
        //身份证号码
        eIdCard: '',
        //家庭地址
        eHomeLocation: '',
        //身高
        eHeight: '',
        //体重
        eWeight: '',
        //政治面貌
        ePStatus: '',
        //qq
        qq: '',
        //手机
        eStaffPhone: '',
        //邮箱
        eEmail: '',
        //工作经验
        eWorkExperience: '',
        //掌握技能
        eSkill: '',
        //获奖经历
        eAward: '',
        //年度考核情况
        eYearStatus: '',
        //人员备注
        eRemark: '',
        //工龄
        eSeniority: ''
      },
      rules: {
        eName: [
          {required: true, message: '这是必填字段', trigger: 'blur'}
        ],
        eId: [
          {required: true, message: '这是必填字段', trigger: 'blur'}
        ],
        eBirthday: [
          {required: true, message: '这是必填字段', trigger: 'blur'}
        ],
        eEmail:[
          {require:true, message:'请输入正确邮箱', trigger:'blur'},
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      },
      //学历下拉框数据
      education: [{
        value: '选项1',
        label: '初中以下'
      }, {
        value: '选项2',
        label: '初中'
      }, {
        value: '选项3',
        label: '高中/中专'
      }, {
        value: '选项4',
        label: '大专'
      }, {
        value: '选项5',
        label: '本科'
      }, {
        value: '选项6',
        label: '硕士'
      }, {
        value: '选项7',
        label: '博士'
      }],
      //婚姻下拉框数据
      Marital: [{
        value: '选项1',
        label: '未婚'
      }, {
        value: '选项2',
        label: '已婚'
      }, {
        value: '选项3',
        label: '离异'
      }, {
        value: '选项4',
        label: '丧偶'
      },],
      //状态下拉框数据
      status: [
        {
          value: '选项1',
          label: '在职'
        },
        {
          value: '选项2',
          label: '离职'
        }
      ],
      //级别
      level: [{value: '选项1', label: 'A'}, {value: '选项2', label: 'B'}, {value: '选项3', label: 'C'}],
      //部门
      department: [],
      //职称
      profession: [{value: '选项1', label: '总监'}, {value: '选项2', label: '经理'}, {value: '选项3', label: '主管'}, {
        value: '选项4',
        label: '员工'
      }],
      //职务
      position: [{value: '选项1', label: '销售'}, {value: '选项2', label: '财务'}, {value: '选项3', label: '策划'}],
      //人员类别
      category: [{value: '选项1', label: '公司直招'}, {value: '选项2', label: '劳务部门派遣'}],
      //显示隐藏离职日期
      show: false
    }
  },
  created() {
    this.$axios.get('/department/showDepartment/1/19').then(
        (res) => {
          this.department = res.data.data
        }
    )
  },
  methods: {
    handleAvatarSuccess1(res, file) {
      console.log(res)
      this.form.eImg = URL.createObjectURL(file.raw);

    },
    handleAvatarSuccess2(res, file) {
      this.form.eDesImg = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess3(res, file) {
      this.form.eCardImg = URL.createObjectURL(file.raw);
    },
    //状态改变时触发的事件
    statusChange(val) {
      console.log(val)
      if (val == '离职') {
        this.show = true
      } else {
        this.show = false
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  //格式化目前日期
  get_now_date(){
    var timestamp = Date.parse(new Date());
    var date = new Date(timestamp);
    //获取年份
    var Y = date.getFullYear();
    //获取月份
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
    //获取当日日期
    var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    return Y + '-' + M + '-' + D;
  },
    //年月日相减
    getOffsetDays(startDate, endDate)
    {
      var startDateArr = startDate.split("-");
      var endDateArr = endDate.split("-");
      if(endDateArr[0]>startDateArr[0]){
        return endDateArr[0]-startDateArr[0]
      }else{
        return endDateArr[1]>startDateArr[1]
      }
    },
  //增加员工
  onSubmit(formName) {
    this.$refs[formName].validate(async (valid) => {
      if (valid) {
        let did = this.department.find(el => el.dname == this.form.eDep).did;
        /*    let dname=this.form.eDep
            let dparentId=this.department.find(el=>el.dname==this.form.eDep).dparentId;
            let dadimin=this.department.find(el=>el.dname==this.form.eDep).dadimin;
            let dphone=this.department.find(el=>el.dname==this.form.eDep).dphone;
            let dqq=this.department.find(el=>el.dname==this.form.eDep).dqq;
            let demail=this.department.find(el=>el.dname==this.form.eDep).demail;
            let ddescription=this.department.find(el=>el.dname==this.form.eDep).ddescription;
            let dparentName=this.department.find(el=>el.dname==this.form.eDep).dadimin;*/
        await this.$axios({
          url: '/employee/addEmployee',
          method: 'post',
          params: {
            DId: Number(did),
            EAge: Number(this.form.eAge),
            EAward: this.form.eAward,
            EBirthday: this.form.eBirthday,
            EBirthplace: this.form.eNP,
            EBlood: this.form.eBlood,
            ECardImg: this.form.eCardImg,
            EDesImg: this.form.eDesImg,
            EEducation: this.form.eEducation,
            EEmail: this.form.eEmail,
            EHealth: this.form.eHealth,
            EHeight: this.form.eHeight,
            EHomeLocation: this.form.eHomeLocation,
            EId: Number(this.form.eId),
            EIdCard: this.form.eIdCard,
            EImg: this.form.eImg,
            EJobTitle: this.form.eJobTitle,
            EJoinDate: this.form.eJoinDate,
            ELeaveDate: this.form.eLeaveDate,
            ELeaveImg: 'mllxsx.jpg',
            ELevel: this.form.eLevel,
            ELocation: this.form.eLocation,
            EMarriage: this.form.eMarriage,
            EName: this.form.eName,
            ENation: this.form.eNation,
            EPStatus: this.form.ePStatus,
            EPersonType: this.form.ePersonType,
            EPhone: this.form.ePhone,
            EPosition: this.form.ePosition,
            ERemark: this.form.eRemark,
            ESeniority: Number(this.form.eSeniority),
            ESex: this.form.eSex,
            ESkill: this.form.eSkill,
            EStaffPhone: this.form.eStaffPhone,
            EStatus: this.form.eStatus,
            EWeight: this.form.eWeight,
            EWorkExperience: this.form.eWorkExperience,
            EYearStatus: this.form.eYearStatus,
            qq: this.form.qq
          }
        }).then((res) => {
          if (res.data.code == 100) {
            this.$message({
              type: 'success',
              message: '添加成功！'
            });
            const _this = this;
            setTimeout(function () {
              _this.$router.go(-1)
            }, 4000)
          }
        }).catch((err) => {
          console.log(err)
        })
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  }
}
}
</script>

<style scoped>
.bigDiv {
  width: 100%;
}

.headerDiv {
  width: 100%;
  height: 50px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  outline: 1px solid #cfd1d2;
}

.content {
  width: 1000px;
}

.avatar-uploader {
  border: 1px dashed #949292;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>